Chapter 13: Introduction to React

For those who have some experience with React, this section will be familiar to you. But even if you are new to

React, you should still be able to follow along. If you are interested in digging into React details, you can check out

my React book.

Before we go on further, let ’ s explain briefly what is React. React is a framework released by Facebook for

creating user interfaces with components. For example, if we want to build a storefront module like what we see on

Amazon, we can divide it into three components. The search bar component, sidebar component and products

component (fig. 1).

Figure 1

Components can also contain other components. For example, in products component where we display a list of

products, we do so using multiple product components. Also, in each product component, we can have a rating

component.

The benefit of such an architecture helps us to break up a large application into smaller manageable components.

Plus, we can reuse components within the application or even in a different application. For example, we can re-use

the rating component in a different application.

A React component contains a JSX template that ultimately outputs HTML elements. It has its own data and logic

to control the JSX template. When the values of its data changes, React will update the concerned UI component.

Below is an example of a component that displays a simple string ‘ Products ’ .

Analyze Code

import React from 'react';

function Products() {

return (

<div>

<h2>

Products

</h2>

</div>

);

}

export default Products;

The function returns a React element in JSX syntax which determines what is displayed in the UI.

JSX is a syntax extension to Javascript. JSX converts to HTML when processed.

Creating the React Project folder